@import './color.scss';

@mixin defineColors($key, $name, $len) {
  @for $i from 1 through $len {
    .#{$name}-#{$i}-text {
      color: #{getColor($key, $i)};
    }
    .#{$name}-#{$i}-bg {
      background-color: #{getColor($key, $i)};
    }
  }
}

@include defineColors($Brand, 'brand', 11);
@include defineColors($Green, 'green', 11);
@include defineColors($Link, 'link', 10);
@include defineColors($Gray, 'gray', 14);
@include defineColors($Blue, 'blue', 11);
@include defineColors($Cyan, 'cyan', 11);
@include defineColors($Error, 'error', 10);
@include defineColors($Warning, 'warning', 10);

$colors: (
  'primary': #db9e3f,
  'white': #fff,
  'light': #f9f9f9,
  'light-1': #d4d9de,
  'black': #000,
  'dark': #222,
  'dark-1': #343440,
  'grey': #999,
  'grey-1': #666,
  'info': #4b67af
);

// 颜色
@each $colorKey, $color in $colors {
  .text-#{$colorKey} {
    color: $color;
  }
  .bg-#{$colorKey} {
    background-color: $color;
  }
}

// flex等分
@for $i from 0 through 12 {
  .flex#{$i} {
    flex: $i;
  }
}

// 字体(px)单位
@for $i from 10 through 80 {
  .fs#{$i} {
    font-size: $i + px;
  }
}

// 宽度高度
@for $num from 0 through 800 {
  .w#{$num} {
    width: #{$num}px;
  }
  .s-w#{$num} {
    min-width: #{$num}px;
  }
  .l-w#{$num} {
    max-width: #{$num}px;
  }
  .h#{$num} {
    height: #{$num}px;
  }
  .s-h#{$num} {
    min-height: #{$num}px;
  }
  .l-h#{$num} {
    max-height: #{$num}px;
  }
  .lh#{$num} {
    line-height: #{$num}px;
  }
}

// 内外边距，历遍1-200
@for $i from 0 through 200 {
  // 只要双数和能被5除尽的数
  @if $i % 2==0 or $i % 5==0 {
    // 得出：m30
    .m#{$i} {
      margin: $i + px;
    }

    // 得出：p30
    .p#{$i} {
      padding: $i + px;
    }

    @each $short in x, y {
      @if $short==x {
        // 得出：mx0
        .m#{$short}#{$i} {
          margin-left: $i + px;
          margin-right: $i + px;
        }

        // 得出：px00
        .p#{$short}#{$i} {
          padding-left: $i + px;
          padding-right: $i + px;
        }
      }

      @if $short==y {
        // 得出：my0
        .m#{$short}#{$i} {
          margin-top: $i + px;
          margin-bottom: $i + px;
        }

        // 得出：py0
        .p#{$short}#{$i} {
          padding-top: $i + px;
          padding-bottom: $i + px;
        }
      }
    }

    @each $short, $long in l left, t top, r right, b bottom {
      // 缩写版，结果如： ml-30
      // 定义外边距
      .m#{$short}#{$i} {
        margin-#{$long}: $i + px;
      }

      // 定义内边距
      .p#{$short}#{$i} {
        padding-#{$long}: $i + px;
      }

      // 完整版，结果如：margin-left-30
      // 定义外边距
      .margin#{$long}#{$i} {
        margin-#{$long}: $i + px;
      }

      // 定义内边距
      .padding#{$long}#{$i} {
        padding-#{$long}: $i + px;
      }
    }
  }
}

// 旋转
@for $i from 0 through 360 {
  .tr#{$i} {
    transform: rotate(#{$i}deg);
  }
}

// 文本不换行
.text-nowrap {
  white-space: nowrap;
}

// 取消双击选中文字
.user-select {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

// 单行超出省略
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  word-break: break-all;
  word-wrap: normal;
}

// 对齐方式
.text-center,
.text-c,
.tc {
  text-align: center;
}
.text-left,
.text-l,
.tl {
  text-align: left;
}
.text-right,
.text-r,
.tr {
  text-align: right;
}

// 浮动
.float-left,
.f-l,
.fl {
  float: left;
}
.float-right,
.f-r,
.fr {
  float: right;
}

// 避免因子元素浮动而导致的父元素高度缺失能问题
.cl:after,
.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.cl,
.clearfix {
  zoom: 1;
}

.dis-block,
.d-b,
.db {
  display: block;
}
.dis-flex,
.d-f,
.df {
  display: flex;
}
.dis-none,
.d-n,
.dn {
  display: none;
}
.dis-inline-block,
.d-i-b,
.dib {
  display: inline-block;
}
.dis-table,
.d-t,
.dt {
  display: table;
}
.dis-table-cell,
.d-t-c,
.dtc {
  display: table-cell;
}
.box-sizing,
.b-s,
.bs {
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
}
.ver-top,
.v-t,
.vt {
  vertical-align: top;
}

// 鼠标样式
.cur-p,
.cp {
  cursor: pointer;
}
.cur-d,
.cd {
  cursor: default;
}
.cur-not,
.cn {
  cursor: not-allowed;
}
.cur-help,
.ch {
  cursor: help;
}
.cur-no-drop,
.cnd {
  cursor: no-drop;
}

// 背景颜色
.back-green {
  background: #39c851;
}
.back-blue {
  background: #448bdd;
}
.back-blue-o {
  background: #708bb0;
}
.back-orange {
  background: #ffab09;
}
.back-orange-o {
  background: #f89944;
}
.back-Pink {
  background: #feb5b0;
}
.back-green-o {
  background: #30ac86;
}
.back-green-p {
  background: #2cc3ac;
}
.back-violet {
  background: #986de7;
}
.back-7a {
  background: #7a9fc9;
}
.back-gray {
  background: #5c616a;
}
.back-bluesky {
  background: #279fd7;
}
.back-fenhong {
  background: #fb6380;
}
.back-888 {
  background: #888;
}
.back-ccc {
  background: #ccc;
}
.back-fff {
  background: #fff;
}
.back-f4 {
  background: #f4f4f4;
}

// 背景过渡色
.back-ferry-blue {
  background: linear-gradient(180deg, #2ea1f8, #1990ea);
}
.back-ferry-purple {
  background: linear-gradient(90deg, #9d90e4, #8261e6);
}
.back-ferry-orange {
  background: linear-gradient(0deg, #fd9918, #f8c95d);
}
.back-ferry-red {
  background: linear-gradient(90deg, #445c83, #5684af);
}
.back-ferry-green-light {
  background: linear-gradient(90deg, #2bb415, #5ad946);
}
.back-ferry-green {
  background: linear-gradient(0deg, #39b54a, #39b54a);
}
.back-ferry-white {
  background: linear-gradient(0deg, #f2f4f7, #ffffff);
}
.back-ferry-blue-grey {
  background: linear-gradient(90deg, rgba(0, 172, 255, 1), rgba(0, 172, 255, 0.1));
}

// 透明度
.opac-0 {
  opacity: 0;
}
.opac-2 {
  opacity: 0.2;
}
.opac-4 {
  opacity: 0.4;
}
.opac-6 {
  opacity: 0.6;
}
.opac-8 {
  opacity: 0.8;
}
.opac-1 {
  opacity: 1;
}

// 边框
.b {
  border: 1px solid #ecf3f5;
}
.bl {
  border-left: 1px solid #ecf3f5;
}
.bl-n {
  border-left: none;
}
.br {
  border-right: 1px solid #ecf3f5;
}
.br-n {
  border-right: none;
}
.bt {
  border-top: 1px solid #ecf3f5;
}
.bt-n {
  border-top: none;
}
.bb {
  border-bottom: 1px solid #ecf3f5;
}
.bb-n {
  border-bottom: none;
}
// 边框颜色
.borde-white {
  border-color: #e6eaee;
}
.borde-grey {
  border-color: #dfe3e9;
}
.borde-blue {
  border-color: #1585d8;
}
.borde-red {
  border-color: red;
}

// 圆角
.br0 {
  border-radius: 0px;
}
.br2 {
  border-radius: 2px;
}
.br4 {
  border-radius: 4px;
}
.br6 {
  border-radius: 6px;
}
.br8 {
  border-radius: 8px;
}
.br10 {
  border-radius: 10px;
}
.br20 {
  border-radius: 20px;
}
.br50 {
  border-radius: 50%;
}

// flex
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
}
.flex-auto {
  flex: auto;
}
.flex-row {
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.flex-row-reverse {
  -webkit-box-pack: end;
  -webkit-box-direction: reverse;
  -webkit-box-orient: horizontal;
  -moz-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.flex-column {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.flex-column-reverse {
  -webkit-box-pack: end;
  -webkit-box-direction: reverse;
  -webkit-box-orient: vertical;
  -moz-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
// 水平布局
.flex-items-center {
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
.flex-items-start {
  -webkit-box-align: start;
  -moz-align-items: start;
  -webkit-align-items: flex-start;
  align-items: start;
}
.flex-items-end {
  -webkit-box-align: end;
  -moz-align-items: flex-end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.flex-items-baseline {
  -webkit-box-align: baseline;
  -moz-align-items: baseline;
  -webkit-align-items: baseline;
  align-items: baseline;
}
.flex-items-stretch {
  -webkit-box-align: stretch;
  -moz-align-items: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}
.flex-align-start {
  -webkit-box-align: start;
  -moz-align-items: start;
  -webkit-align-items: flex-start;
  align-items: start;
}
.flex-align-end {
  align-content: flex-end;
}
.flex-align-center {
  align-content: center;
}
.flex-align-between {
  align-content: space-between;
}
.flex-align-around {
  align-content: space-around;
}
.flex-align-around {
  align-content: stretch;
}
// 垂直布局
.flex-justify-center {
  -webkit-box-pack: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.flex-justify-start {
  -webkit-box-pack: start;
  -moz-justify-content: start;
  -webkit-justify-content: flex-start;
  justify-content: start;
}
.flex-justify-end {
  webkit-box-pack: end;
  -moz-justify-content: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.flex-justify-between {
  -webkit-box-pack: justify;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.flex-justify-around {
  justify-content: space-around;
}
.flex-wrap {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-wrap-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.flex-self-start {
  align-self: flex-start;
}
.flex-self-end {
  align-self: flex-end;
}
.flex-self-baseline {
  align-self: baseline;
}
.flex-self-center {
  align-self: center;
}
.flex-self-stretch {
  align-self: stretch;
}
.flex-grow {
  -webkit-box-flex: 1;
  -moz-flex-grow: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
// 换行
.flex-flow-row {
  flex-flow: row wrap;
}
.flex-order {
  -webkit-box-ordinal-group: 1;
  -moz-order: 1;
  -webkit-order: 1;
  order: 1;
}

/*定位*/
.pos-r {
  position: relative;
}
.pos-a {
  position: absolute;
}
.top-0 {
  top: 0;
}
.right-0 {
  right: 0;
}
.left-0 {
  left: 0;
}
.bottom-0 {
  bottom: 0;
}

// 字重
.font-100 {
  font-weight: 100;
}
.font-200 {
  font-weight: 200;
}
.font-300 {
  font-weight: 300;
}
.font-400 {
  font-weight: 400;
}
.font-500 {
  font-weight: 500;
}
.font-600 {
  font-weight: 600;
}
.font-700 {
  font-weight: 700;
}
.font-800 {
  font-weight: 800;
}
.font-900 {
  font-weight: 900;
}
.font-bold {
  font-weight: bold;
}
.font-normal {
  font-weight: normal;
}
.font-lighter {
  font-weight: lighter;
}

.text-c1 {
  color: var(--fok-text-color-1);
}
.text-c2 {
  color: var(--fok-text-color-2);
}
.text-c3 {
  color: var(--fok-text-color-3);
}

.category-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fok-text-color-1);
  display: flex;
  align-items: center;
  &::before {
    display: inline-block;
    margin-right: 8px;
    content: '';
    width: 3px;
    background: var(--fok-color-brand-10);
    height: 14px;
  }
}
